// 布局文件
import React, { Component, Fragment } from "react";
import Admin from "../../router/Admin" // 导入嵌套路由子页面
import {Link} from "react-router-dom" // 导入路由模块
import "../../static/layout.css" // 导入css
// 导入请求资源
import url from "../../config/url";
import req from "../../http/req";
// 导入logo
import logo from "../../static/logo.jpg";
// 导入强化函数
import CheckLogin from "../../hoc/CheckLogin";
// 导入ant资源
import { Layout, Menu, message, Modal } from "antd";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  // UserOutlined,
  // VideoCameraOutlined,
  // UploadOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
const { Header, Sider, Content } = Layout;
const { confirm } = Modal;
// 类组件
class Home extends Component {
  // 初始化
  state = {
    collapsed: false,
    selectedKey:[this.props.location.pathname],
    openKey:[this.props.location.pathname.split("/").splice(0,3).join("/")]
  };
  // 初始化acl列表
  acl = JSON.parse(sessionStorage.getItem("acl"));

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    return (
      <>
        <Layout style={{ minHeight: "100vh" }}>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo">
              <img src={logo} alt="logo" />
            </div>
            <Menu theme="dark" defaultSelectedKeys={this.state.selectedKey} defaultOpenKeys={this.state.openKey} mode="inline">
              {/* 动态输出菜单 */}
              {
                this.acl.map((el) => {
                  return el.children.length > 0 ? (
                    <Menu.SubMenu key={el.auth_path} title={el.auth_name}>
                      {
                        el.children.map((ele) => {
                          return ele.is_nav ? <Menu.Item key={ele.auth_path}>
                          <Link to={ele.auth_path}>{ele.auth_name}</Link>
                        </Menu.Item> : <Fragment key={ele.auth_path}></Fragment>
                        })
                      }
                    </Menu.SubMenu>
                  ) : (<Menu.Item key={el.auth_path}>
                        <Link to={el.auth_path}>{el.auth_name}</Link></Menu.Item>)
                })
              }
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }}>
              {React.createElement(
                this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                {
                  className: "trigger",
                  onClick: this.toggle,
                }
              )}
              <span>
                您好，{this.state.uname}! 上次登录于{this.state.addr}(
                {this.state.ip}) [<a onClick={this.confirm}>注销登录</a>]
              </span>
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: "24px 16px",
                padding: 24,
                minHeight: 280,
              }}
            >
              <Admin />
            </Content>
          </Layout>
        </Layout>
      </>
    );
  }
  // 获取当前管理员的基本信息
  componentDidMount() {
    req.get(url.GetAdminInfo).then((res) => {
      if (res.data.errNo === 0) {
        this.setState({
          uname: res.data.accountInfo.username,
          ip: res.data.accountInfo.last_ip,
          addr:
            res.data.accountInfo.last_login_addr.state +
            " " +
            res.data.accountInfo.last_login_addr.isp,
        });
      }
    });
  }
  // 注销的模态对话框
  confirm = () => {
    confirm({
      title: "确认操作",
      icon: <ExclamationCircleOutlined />,
      content: "你是否确定注销本次登录",
      okText: "确定",
      cancelText: "取消",
      onOk: () => {
        // 执行退出的操作
        sessionStorage.removeItem("jwt");
        sessionStorage.removeItem("acl");
        message.success("注销成功", 2, () => {
          this.props.history.push("/login");
        })
      }
    })
  }
}

export default CheckLogin(Home)
